<template>
    <div class="space-details-content">
        <NavTop class="header" :style="`opacity: ${opacityStyle};`">
            <BackBtn/>
            <div class="navtop-title">{{ userInfo.nick }}的空间</div>
        </NavTop>
        <van-icon name="arrow-left" class="back-btn-black" @click="backBtn" :style="`opacity: ${1 - opacityStyle};`"/>
        <main>
            <!-- 背景 -->
            <div class="space-bg" :style="`background-image: url(${$baseUrl + generateRandomImg});`"></div>
            <!-- 用户头像 -->
            <div class="user">
                <div class="user-pic">
                    <img :src="$baseUrl + userInfo.imgUrl" alt="">
                </div>
                <div class="user-info">
                    <div class="user-nick">{{ userInfo.nick }}</div>
                    <div class="user-code">WaiFCode: {{ userInfo.WaiFCode }}</div>
                </div>
            </div>
            <!-- 空间动态列表 -->
            <div class="space-list">
                <SpaceList :spaceList="spaceList"/>
            </div>
        </main>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop'
import BackBtn from '@/components/BackBtn'
import SpaceList from '@/components/SpaceList'
import { reqGetSpaceListDetails } from '@/api'
import { Toast } from 'vant'
import { formatDate } from '@/utils'
export default {
    components: {
        NavTop,
        BackBtn,
        SpaceList
    },
	data() {
		return {
			opacityStyle: 0,
            spaceList: [],
            userInfo: {}
		}
	},
    computed: {
        generateRandomImg() {
            let randomNumber = Math.floor(Math.random() * 15) + 1
            return `/login_bg${randomNumber}.png`
        }
    },
    methods: {
		// 滚动页面时触发导航变色
	    handleScroll () {
            let scrollTop = window.scrollY
            let opacity = scrollTop / 150
            this.opacityStyle = opacity > 1 ? 1 : opacity
	    },
        backBtn() {
            this.$router.go(-1)
        },
        // 获取空间动态详情列表
        async getSpaceListDetails() {
            let userId = this.$route.query._id
            let res = await reqGetSpaceListDetails({userId})
            if (res.status === 200) {
                const { spaces, user } = res.data
                spaces.forEach(i => {
                    i.time = formatDate(i.time)
                })
                this.spaceList = spaces
                this.userInfo = user
            } else {
                Toast.fail('服务器错误')
            }
        }
	},
    mounted() {
    	window.addEventListener('scroll', this.handleScroll, true) // 监听页面滚动
        this.getSpaceListDetails()
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.handleScroll, true)
    }
}
</script>

<style lang="less" scoped>
.space-details-content {
    width: 100%;
    height: 100vh;
    background-color: #f6f6f6;
}
.header {
    width: 100%;
    height: 1.3333rem;
    background-color: #4dc0ff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.back-btn-black {
    position: fixed;
    left: .4rem;
    top: .4rem;
    font-size: .5333rem;
    color: #5c5b5b;
    font-weight: 600;
    z-index: 10;
}
main {
    width: 100%;
    position: relative;
    .space-bg {
        width: 100%;
        height: 6.6667rem;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .user {
        width: 100%;
        height: 1.7333rem;
        padding: 0 .5333rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin-bottom: .3333rem;
        position: absolute;
        top: 4rem;
        left: 0;
        color: #fff;
        .user-pic {
            width: 1.7333rem;
            height: 1.7333rem;
            border-radius: 50%;
            overflow: hidden;
            margin-right: .2rem;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .user-info {
            display: flex;
            flex: 1;
            height: 100%;
            padding: .2667rem 0;
            box-sizing: border-box;
            flex-direction: column;
            justify-content: space-around;
            font-size: .5333rem;
            .user-code {
                font-size: .3333rem;
            }
        }
    }
    .space-list {
        width: 100%;
        background-color: #f6f6f6;
        overflow: hidden;
        position: absolute;
        top: 6rem;
        left: 0;
        border-radius: .4rem .4rem 0 0;
        .no-space {
            width: 100%;
            height: 100%;
        }
    }
}
</style>